<script setup lang="ts">
import vipPersonImg from 'public/img/vip-person.png'
import type { UserInfo } from '~/api/model/user'
import Add from './add.vue'
import { toPx } from '@/utils/toPx';
definePageMeta({
    layout: 'vip',
    title: 'VIP中心',
    i18n: 'menu.vip',
})
const { t } = useI18n();
// 用户信息
const userInfo = useUserStore().user
// 当前swiper索引
const curSwiper = ref(0);
// 初始进度0%
const realProgress = ref(0)
// 目标进度80%
// const targetProgress = ref(0)
// 获取 van-swipe 实例
const swipeRef = ref()
const vipArr = ref([
    {
        name: 'VIP1',
        price: 100,
        val: 0,
        img: '/img/v1.png',
        bg: '/img/v1_bg.png'
    },
    {
        name: 'VIP2',
        price: 200,
        val: 1,
        img: '/img/v2.png',
        bg: '/img/v2_bg.png'
    },
    {
        name: 'VIP3',
        price: 300,
        val: 2,
        img: '/img/v3.png',
        bg: '/img/v3_bg.png'
    },
    {
        name: 'VIP4',
        price: 400,
        val: 3,
        img: '/img/v4.png',
        bg: '/img/v4_bg.png'
    },
    {
        name: 'VIP5',
        price: 500,
        val: 4,
        img: '/img/v5.png',
        bg: '/img/v5_bg.png'
    },
    {
        name: 'VIP6',
        price: 500,
        val: 5,
        img: '/img/v6.png',
        bg: '/img/v6_bg.png'
    },
    {
        name: 'VIP7',
        price: 500,
        val: 6,
        img: '/img/v7.png',
        bg: '/img/v7_bg.png'
    },
    {
        name: 'VIP8',
        price: 500,
        val: 7,
        img: '/img/v8.png',
        bg: '/img/v8_bg.png'
    },
    {
        name: 'VIP9',
        price: 500,
        val: 8,
        img: '/img/v9.png',
        bg: '/img/v9_bg.png'
    },
    {
        name: 'VIP10',
        price: 500,
        val: 9,
        img: '/img/v10.png',
        bg: '/img/v10_bg.png'
    },
])
const vipLevel = [
    {
        id: 0,
        name: 'VIP0',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 1,
        name: 'VIP1',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 2,
        name: 'VIP2',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 3,
        name: 'VIP3',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 4,
        name: 'VIP4',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 5,
        name: 'VIP5',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
]
const vipTitle = [
    {
        name: t("my_page.vip.vipLevel")
    },
    {
        name: t("my_page.vip.sport")
    },
    {
        name: t("my_page.vip.eEport")
    },
    {
        name: t("my_page.vip.basketball")
    },
    {
        name: t("my_page.vip.personal")
    },
    {
        name: t("my_page.vip.chess")
    },
    {
        name: t("my_page.vip.electron")
    },
    {
        name: t("my_page.vip.enjoy")
    },
]
const changeSwipe = (val: number) => {
    curSwiper.value = val
}
// 点击 VIP 标签
const onVipClick = (index: number) => {
    curSwiper.value = index
    swipeRef.value?.swipeTo(index)
}
/** 进度平滑递增动画 */
function animateProgress() {
    let timer = setInterval(() => {
        if (realProgress.value >= userInfo.targetProgress) {
            clearInterval(timer)
            realProgress.value = userInfo.targetProgress
        } else {
            realProgress.value += 1
        }
    }, 10)
}
onMounted(async () => {
    realProgress.value = 0
    animateProgress()
    curSwiper.value = Math.max(userInfo.curVip - 1, 0);

})
const vipTabWrapper = ref<HTMLDivElement | null>(null)
const vipTabItemWidth = 36  // 每个tab的宽度，单位 px
const vipTabGap = 10        // 每个tab间距

const scrollLeft = ref(0)

watch(() => curSwiper.value, (val) => {

    const itemTotalWidth = vipTabItemWidth + vipTabGap
    let targetOffset = val * itemTotalWidth + vipTabGap / 2
    if (val == 0) targetOffset = -3
    scrollLeft.value = targetOffset

})

// 标签间的进度条
const getLineColor = (index: number) => {
    if (index + 1 < userInfo.curVip) {
        return '#1989fa';
    } else if (index + 1 === userInfo.curVip) {
        if (userInfo.curVip === 0) {
            return '#f2f2f2';
        } else {
            return `linear-gradient(to right, #1989fa ${userInfo.targetProgress}%, #f2f2f2 ${100 - userInfo.targetProgress}%)`;
        }

    }
    return '#f2f2f2';
};

const curVIpLevel = (index: number) => {
    if (userInfo.curVip === 0) {
        return false
    } else {
        return userInfo.curVip - 1 === index
    }

}
// 获取轮播图项透明度：当前VIP之前为1，之后为0.5
const getVipOpacity = (index: number) => {
    if (userInfo.curVip === 0) return 0.5;
    return index < userInfo.curVip ? 1 : 0.5;
}
const Indicator = ref('')
const getIndicator = (active: number, total: number) => {
    Indicator.value = (active + 1) + '/' + total
    return (active + 1) + '/' + total
}
</script>

<template>
    <div class="vip" mx-auto text-16 text-dark dark:text-white>
        <!-- <Add /> -->
        <!-- 个人信息 -->
        <div class="custom-box" pb-30 bg-gradient-to-r from='#e8eafc' to='#fcfcfe'>
            <div class="flex justify-between items-start px-16">
                <div class="w-60% flex items-center ">
                    <img class="w-36 h-36 mr-10 rounded-full mt-20" src="/img/head.png" alt="">
                    <div class="mt-20">
                        <div class="text-14"><span>{{ userInfo.name }}</span><span>{{ userInfo.id }}</span></div>
                        <div class="flex items-center">
                            <div class="flex items-center relative w-49">
                                <img class="w-15 h-15 relative z-2" src="/img/vip-v.png" alt="">
                                <img class="w-48 mr-10 absolute left-2" src="/img/vip-bg.png" alt="">
                                <div class="text-10 relative left-4 z-2 color-#ffffff">{{ 'VIP' + userInfo.curVip }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="w-65  mr-10 " :src="'/img/v' + userInfo.curVip + '.png'" alt="">
                </div>
            </div>

            <div class="flex justify-between items-center my-10 px-40 relative" v-if="userInfo.curVip < 10">
                <span class="mr-10 text-11 text-#ffffff bg-#0f9fff rounded-20 px-6"> {{ 'VIP' + userInfo.curVip
                }}</span>
                <!-- vip进度条 -->
                <div class="vip-progress-bar">
                    <div class="vip-progress-inner" :style="{ width: realProgress + '%' }"></div>
                </div>
                <div>
                    <div class="text-12 absolute top--18 right-86">{{userInfo.targetProgress}}%</div>
                    <img :src="vipPersonImg" alt="" class="w-24 absolute top-1 z-2"
                        style="transition: all 0.5s linear"
                        :style="{ left: (85 + 178 * realProgress / 100) + 'px' }" />
                </div>
                <span class="toVip ml-10 text-11 text-#ffffff bg-#0f9fff rounded-20 px-6"> {{ 'VIP' + (userInfo.curVip +
                    1)
                }}</span>
            </div>

            <div flex justify-between items-center px-40>
                <div>
                    <span class="inline-block w-5 h-5  mb-2 mr-5 bg-black rounded-full"></span>
                    <span text-12 mr-10>{{ t("my_page.vip.commonFlow") }}:</span>
                    <span text-12>99999999</span>
                </div>
            </div>
        </div>
        <!-- VIP等级标签 -->
        <div class="bg-#ffffff">
            <div class="overflow-x-hidden no-scrollbar bg-#ffffff py-20 mx-20">
                <div ref="vipTabWrapper" class="flex items-center w-max transition-transform duration-300 "
                    :style="{ transform: curSwiper === 0 ? 'translateX(0px)' : curSwiper === 9 ? 'translateX(-385px)' : `translateX(-${scrollLeft}px)` }">
                    <template v-for="(vip, index) in vipArr" :key="vip.val">
                        <!-- Vip标签 -->
                        <div class="text-10 px-5  bg-#f3f2fa color-#9497a4 border-1 border-#e5e6eb rounded-20" :class="{
                            'active-vip-bg': curSwiper === vip.val,
                            'active-curVips': userInfo.curVip > vip.val,
                        }" @click="onVipClick(index)">
                            {{ vip.name }}
                        </div>
                        <!-- 标签间的进度条 -->
                        <div v-if="index < vipArr.length - 1" class="flex items-center mr-2">
                            <span class="w-40 h-2 inline-block text-center mx-auto"
                                :style="{ background: getLineColor(index) }"></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="px-16 pb-16 bg-#ffffff">
            <van-swipe ref="swipeRef" class="my-swipe" indicator-color="white"
                :initial-swipe="userInfo.curVip === 0 ? 0 : userInfo.curVip - 1" :loop="false" @change="changeSwipe">
                <van-swipe-item v-for="(item, index) in vipArr" :key="item.val">
                    <div class=" swipe-item  rounded-10 pb-10 relative"
                        :class="{ 'active-swipe': userInfo.curVip === index }"
                        :style="{ backgroundImage: 'url(' + item.bg + ')', backgroundSize: 'cover', opacity: getVipOpacity(index) }">
                        <div class="curLevel absolute bg-#b6e9fe rounded-tl-10 rounded-br-10 text-12 px-5 py-1 "
                            v-if="curVIpLevel(index)">
                            当前等级
                        </div>
                        <div class="flex justify-around items-center pt-80 pb-15">
                            <div class="text-12 color-#343744 text-center">
                                <div>有效流水</div>
                                <div>{{ item.price }}</div>
                            </div>
                            <div class="text-12 color-#343744 text-center">
                                <div>暴击级流水</div>
                                <div>{{ item.price }}</div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>

                <template #indicator="{ active, total }">
                    <div v-show="false" class="custom-indicator">{{ getIndicator(active, total) }}</div>
                </template>
            </van-swipe>
            <div class="text-right color-#676676 text-12 mr-5 mt-5">{{ Indicator }}</div>
        </div>
        <!-- VIP尊享 -->
        <div class="bg-#f3f8ff py-15">
            <div class="bg-#ffffff">
                <div class="title font-bold text-14">
                    {{t('my_page.vip.enjoyVip')}}
                </div>
                <div class="flex justify-between flex-wrap px-16 pt-16">
                    <div class=" flex items-center w-50% mb-20">
                        <div class="w-40  mr-5">
                            <img class="w-28 h-18  mx-auto" src="/img/vip_icon1.png" alt="">
                        </div>
                        <div>
                            <div>5</div>
                            <div class="text-12 color-#8b8da0">每日提款次数</div>
                        </div>
                    </div>
                    <div class=" flex items-center w-50% mb-20">
                        <div class="w-40 mr-5">
                            <img class="w-22 h-20  mx-auto" src="/img/vip_icon2.png" alt="">
                        </div>
                        <div>
                            <div>5</div>
                            <div class="text-12 color-#8b8da0">升级礼盒</div>
                        </div>
                    </div>
                    <div class=" flex items-center w-50% mb-20">
                        <div class="w-40 mr-5">
                            <img class="w-22 h-25 mx-auto" src="/img/vip_icon3.png" alt="">
                        </div>
                        <div>
                            <div>5</div>
                            <div class="text-12 color-#8b8da0">每周红包</div>
                        </div>
                    </div>
                    <div class=" flex items-center w-50% mb-20">
                        <div class="w-40 mr-5">
                            <img class="w-24 h-22  mx-auto" src="/img/vip_icon4.png" alt="">
                        </div>
                        <div>
                            <div>5</div>
                            <div class="text-12 color-#8b8da0">流水返利</div>
                        </div>
                    </div>
                    <div class=" flex items-center w-50% mb-20">
                        <div class="w-40 mr-5">
                            <img class="w-24 h-22  mx-auto" src="/img/vip_icon5.png" alt="">
                        </div>
                        <div>
                            <div>5</div>
                            <div class="text-12 color-#8b8da0">每天专送客服</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  流水返利详情 -->
        <div>
            <div class="bg-#ffffff ">
                <div class="title font-bold text-14 pb-10">
                    {{t('my_page.vip.rebateInfo')}}
                </div>
            </div>
            <div class="vip-table">
                <!-- 表头 -->
                <div class="vip-table-row header">
                    <div v-for="(item, index) in vipTitle" :key="index" class="vip-table-name"
                        :class="{ 'vip-table-first-clo': index == 0, 'first-cell': index == 0 }">
                        {{ item.name }}
                    </div>
                </div>
                <!-- 表体 -->
                <div v-for="(vip, index) in vipLevel" :key="vip.id" class="vip-table-row">
                    <div class="vip-table-cell vip-table-first-clo  flex items-center  font-bold"
                        :class="{ 'odd': index % 2 != 0, 'even': index % 2 == 0 }">
                        <img src="~/assets/images/vip.png" alt="" class="grayscale w-15 h-15 mx-3">
                        {{ vip.name }}
                    </div>
                    <div class="vip-table-cell">{{ vip.ty }}%</div>
                    <div class="vip-table-cell">{{ vip.dj }}%</div>
                    <div class="vip-table-cell">{{ vip.lq }}%</div>
                    <div class="vip-table-cell">{{ vip.zr }}%</div>
                    <div class="vip-table-cell">{{ vip.qp }}%</div>
                    <div class="vip-table-cell">{{ vip.dz }}%</div>
                    <div class="vip-table-cell">{{ vip.yl }}%</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="css" scoped>
.vip {
    height: calc(100vh - 65px);
    overflow: hidden;
    overflow-y: scroll;
}

.my-swipe {
    overflow: hidden;
}

.swipe-item {
    background-size: 100% 100%;
}

.swipe-item {
    margin: 0 10px;
    /* 添加边距 */
    /* transform: translateX(-50%);  */
    transform: translateX(-53%);
    /* 居中显示 */
    left: 50%;
    /* 居中显示 */
    position: relative;
    width: calc(100% - 10px);
    /* 减去边距 */
}

.curLevel {
    margin: 6px 0 0 2px;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.title::before {
    margin-left: 16px;
    display: inline-block;
    content: '';
    width: 3px;
    height: 16px;
    vertical-align: -2px;
    background-color: #1989fa;
    margin-top: 10px;
    margin-right: 8px;
}

.curBg {
    background: #1989fa;
}

.active-swipe {
    /* background: #1989fa;
    记得改样式 */
}

/* 当前等级之前的边框样式 */
.active-curVips {
    box-sizing: border-box;
    color: #1989fa;
    border: 1px solid #1989fa;
    padding: 0 5px !important;
}

.progress-container {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* 点击等级的背景色样式 */
.active-vip-bg {
    box-sizing: border-box;
    background: #1989fa;
    color: #ffffff;
    padding: 1px 5px;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: transparent;
}

.custom-box {
    /* height: 170px;
    background: linear-gradient(to right top, #d3daf7, #fcfcfe);
    border-bottom-left-radius: 80% 50%;
    border-bottom-right-radius: 80% 50%;
    overflow: hidden; */
    background: url('/img/vip_top_bg.png') no-repeat;
    background-size: 100% 100%;
}



.vip-table {
    width: 100%;
    font-size: 12px;
    padding-bottom: 20px;
}

.vip-table-row {
    display: flex;
}

/* 偶数行加背景色 */
.vip-table-row:nth-child(odd) {
    background: #f4f5f7;
}

/* 第一行表格名字 */
.vip-table-row:first-child {
    background: #e5e5ed;
}

/* 第二行VIP0 */
.vip-table-row:nth-child(2) .vip-table-cell {
    background: #d0ebff;
    color: #1294f4 !important;
}

.vip-table-row.header {
    font-weight: bold;
}

/* 表头 */
.vip-table-name {
    flex: 1;
    padding: 5px 11px;
    text-align: center;
    font-size: 10px;
    color: #515159;
}

/* 所有表格单元格 */
.vip-table-cell {
    flex: 1;
    padding: 10px 2px;
    text-align: center;
    font-size: 10px;
    color: #515159;
}

/* 偶数行加背景色 */
.odd {
    background: #dcdfe8;
}

/* 奇数行加背景色 */
.even {
    background: #fbfbfb;
}

/* 第一列：加宽 */
.vip-table-first-clo {
    text-align: center;
    min-width: 55px;
    flex: none;
}

/* 第一个单元格VIP等级 */
.first-cell {
    padding: 5px 4px !important;
    line-height: 30px;
}

/* 进度条 */
.vip-progress-bar {
    width: 100%;
    height: 8px;
    background: #cbd2f0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.vip-progress-inner {
    height: 100%;
    background: linear-gradient(to right, #91cdff, #27a1ff);
    border-radius: 16px;
    transition: all 0.5s linear;
}

/* 数字过渡动画 */
.fade-zoom-enter-active {
    transition: all 0.5s ease;
}

.fade-zoom-enter-from {
    opacity: 0;
    transform: scale(0.5);
}

.fade-zoom-enter-to {
    opacity: 1;
    transform: scale(1);
}

.toVip {
    background-image: linear-gradient(90deg,
            #bbc1cd 0%,
            #dbdde9 99%),
        linear-gradient(#0f9fff,
            #0f9fff);
}
</style>
